<template>
  <div class="box">
    <div class="sbox" v-for="(v, i) in arr" :key="i">
      <p><img :src="v.urlimg" alt="" /></p>
      <div class="js">
        <p>{{ v.title }}</p>
      </div>
      <div class="jg">
        <p>{{ v.jg }}</p>
        <img :src="v.uimg" alt="" />
      </div>
      <span class="iconfont icon-gouwugouwuchedinggou"></span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          urlimg: require("@/assets/youhui/s1.jpg"),
          title: "沃柑（中） 1份/850g",
          jg: "￥6.78",
          uimg: require("@/assets/shouye/xinxiang.png"),
        },
        {
          urlimg: require("@/assets/youhui/s1.jpg"),
          title: "沃柑（中） 1份/850g",
          jg: "￥6.78",
          uimg: require("@/assets/shouye/xinxiang.png"),
        },
        {
          urlimg: require("@/assets/youhui/s1.jpg"),
          title: "沃柑（中） 1份/850g",
          jg: "￥6.78",
          uimg: require("@/assets/shouye/xinxiang.png"),
        },
        {
          urlimg: require("@/assets/youhui/s1.jpg"),
          title: "沃柑（中） 1份/850g",
          jg: "￥6.78",
          uimg: require("@/assets/shouye/xinxiang.png"),
        },
        {
          urlimg: require("@/assets/youhui/s1.jpg"),
          title: "沃柑（中） 1份/850g",
          jg: "￥6.78",
          uimg: require("@/assets/shouye/xinxiang.png"),
        },
        {
          urlimg: require("@/assets/youhui/s1.jpg"),
          title: "沃柑（中） 1份/850g",
          jg: "￥6.78",
          uimg: require("@/assets/shouye/xinxiang.png"),
        },
        {
          urlimg: require("@/assets/youhui/s1.jpg"),
          title: "沃柑（中） 1份/850g",
          jg: "￥6.78",
          uimg: require("@/assets/shouye/xinxiang.png"),
        },
        {
          urlimg: require("@/assets/youhui/s1.jpg"),
          title: "沃柑（中） 1份/850g",
          jg: "￥6.78",
          uimg: require("@/assets/shouye/xinxiang.png"),
        },
        {
          urlimg: require("@/assets/youhui/s1.jpg"),
          title: "沃柑（中） 1份/850g",
          jg: "￥6.78",
          uimg: require("@/assets/shouye/xinxiang.png"),
        },
        {
          urlimg: require("@/assets/youhui/s1.jpg"),
          title: "沃柑（中） 1份/850g",
          jg: "￥6.78",
          uimg: require("@/assets/shouye/xinxiang.png"),
        },
        {
          urlimg: require("@/assets/youhui/s1.jpg"),
          title: "沃柑（中） 1份/850g",
          jg: "￥6.78",
          uimg: require("@/assets/shouye/xinxiang.png"),
        },
        {
          urlimg: require("@/assets/youhui/s1.jpg"),
          title: "沃柑（中） 1份/850g",
          jg: "￥6.78",
          uimg: require("@/assets/shouye/xinxiang.png"),
        },
        {
          urlimg: require("@/assets/youhui/s1.jpg"),
          title: "沃柑（中） 1份/850g",
          jg: "￥6.78",
          uimg: require("@/assets/shouye/xinxiang.png"),
        },

      ],
    };
  },
};
</script>

<style scoped>
.box {
  width: 98.7%;
  min-height: 10rem;
  background: rgb(227, 227, 227);
  padding: 0.15rem 0.05rem 0 0;
  display: flex;
  flex-wrap:wrap ;
  justify-content: space-between;
  padding-bottom: .35rem;
}
.sbox {
  width: 30%;
  height: 2rem;
  background: white;
  position: relative;
  border-radius: 0.05rem;
   margin-left: .07rem;
   margin-bottom: .1rem;
}
.sbox > p > img {
  width: 1rem;
  margin-top: 0.05rem;
}
.sbox .jg img {
  width: 0.6rem;
}

.sbox .js {
  font-size: 14px;
}
.sbox .jg {
  color: rgb(244, 122, 147);
  position: absolute;
  bottom: 0.01rem;
}
.sbox > span {
  font-size: .24rem;
  font-weight: 600;
  color: green;
  position: absolute;
  bottom: 0.1rem;
  right: 0.05rem;
}
</style>    
